<template>
  <a-modal
    style="width: 580px;"
    class="modal"
    :footer="null"
    :visible="props.showDialog"
    :title="showTitle"
    @cancel="close"
  
  >
    <a-form
      ref="formRef"
      @finish="onFinish"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 24 }"
        style="height: 603px;padding-bottom: 0;padding-top: 0;"
      
    >
      <a-form-item label="员工姓名" name="name">
        <a-input
          v-model:value="formData.name"
          style="width: 100%"
          placeholder="请填写员工姓名"
        ></a-input>
      </a-form-item>
      <a-form-item label="登录账号" name="userName">
        <a-input
          v-model:value="formData.userName"
          style="width: 100%"
          placeholder="请填写登录账号"
        ></a-input>
      </a-form-item>
      <a-form-item label="联系方式" name="phonenumber">
        <a-input
          v-model:value="formData.phonenumber"
          style="width: 100%"
          placeholder="请填写联系方式"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <span>默认密码： 123456</span>
      </a-form-item>
      <a-form-item label="分配角色" name="roleId">
        <a-select v-model:value="formData.roleId" placeholder="请选择分配角色">
          <a-select-option v-for="item in selectList" :key="item.roleId" :value="item.roleId">{{
            item.roleName
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="员工状态" name="status">
        <a-radio-group v-model:value="formData.status">
          <a-radio :value="0">禁用</a-radio>
          <a-radio :value="1">启用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-row type="flex" justify="end">
        <a-space>
          <a-button @click="close" style="border-radius: 10px;">取消</a-button>
          <a-button style="border-radius: 10px;" type="primary" html-type="submit">确认</a-button>
        </a-space>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { addEmployee, getRoleList, editEmployee, getEmployeeDetail } from '@/api/employee'
import { message } from 'ant-design-vue'
const formRef = ref(null)
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})

const formData = ref({
  id: null,
  name: '',
  userName: '',
  phonenumber: '',
  roleName: '',
  roleId: null,
  status: ''
})
const selectList = ref([])
const emit = defineEmits(['update:showDialog', 'addsuccess'])

const close = () => {
  formData.value = {
    name: '',
    userName: '',
    phonenumber: null,
    roleName: '',
    status: null
  }
  formRef.value.resetFields()
  emit('update:showDialog', false)
}

const getRoleListAPI = async () => {
  const res = await getRoleList()
  console.log(res.data)
  selectList.value = res.data
  console.log(selectList.value)
}

onMounted(() => {
  getRoleListAPI()
})
const rules = {
  name: [{ required: true, message: '请填写员工姓名', trigger: 'blur' }],
  userName: [{ required: true, message: '请填写登录账号', trigger: 'blur' }],
  phonenumber: [
    { required: true, message: '请填写联系方式', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  roleId: [{ required: true, message: '请选择分配角色', trigger: 'change' }],
  status: [{ required: true, message: '请选择员工状态', trigger: 'blur' }]
}
// ------------
const getEmployeeDetailAPI = async (id) => {
  const { data } = await getEmployeeDetail(id)
  console.log(data)

  formData.value = {
    id:data.id,
    name: data.name,
    userName: data.userName,
    phonenumber: data.phonenumber,
    roleId: data.roleId,
    status: data.status,
    roleName: data.roleName
  }
}
defineExpose({
  getEmployeeDetailAPI
})
//---------
const onFinish = async (values) => {
  if (formData.value.id) {
    await editEmployee(formData.value)
    message.success('编辑成功')

  } else {

    await addEmployee(values)
    message.success('添加成功')

  }

  close()
  
  emit('addsuccess')
}

const showTitle = computed(() => {
  return formData.value.id ? '编辑员工' : '添加员工'
})
</script>

<style lang="scss" scoped>
.form-label {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-top: 10px;
  width: 20%;
}

.form-input {
  display: flex;
  width: 80%;
}

.ant-form {
  width: 580px;

  padding: 20px 80px 0;
}
::v-deep.ant-modal-body{
    padding: 0 !important;
}

</style>
